import React, {useMemo} from 'react'
import {Form, Row, Col, Input} from 'antd'
import {PageType} from '../constant'
import Styles from './index.less'

interface CollectionAccountType {
	pageType: string
	collectionAccountForm: any
	detailRecord: Record<string, string>
}

export function CollectionAccount({
	pageType,
	detailRecord,
	collectionAccountForm,
}: CollectionAccountType) {
	const initialValues = useMemo(() => {
		setTimeout(() => collectionAccountForm.resetFields(), 1)
		return detailRecord
	}, [detailRecord])

	return (
		<div className={Styles.currentFollower}>
			<div className={Styles.titleBox}>收款账户信息</div>
			<div className={Styles.formBox}>
				<Form
					layout="horizontal"
					labelCol={{flex: '140px'}}
					labelAlign="right"
					labelWrap
					autoComplete="off"
					name="PersonalInformationFom"
					form={collectionAccountForm}
					disabled={pageType === PageType.Detail}
					initialValues={initialValues}>
					<Row>
						<Col span={8}>
							<Form.Item
								label="银行卡号"
								name="bankCard"
								rules={[
									{required: true},
									{
										pattern: /^([1-9]{1})(\d{15}|\d{18})$/,
										message: '请输入正确的银行账号',
									},
								]}>
								<Input placeholder="请输入" />
							</Form.Item>
						</Col>
						<Col span={8}>
							<Form.Item
								label="开户银行"
								name="depositBank"
								rules={[{required: true}]}>
								<Input placeholder="请输入" />
							</Form.Item>
						</Col>
						<Col span={8}>
							<Form.Item
								label="开户银支行名称"
								name="depositBankName"
								rules={[{required: true}]}>
								<Input placeholder="请输入" />
							</Form.Item>
						</Col>
					</Row>
				</Form>
			</div>
		</div>
	)
}
